<template>
<div class="pad20">
    <el-row>
        <el-col :span="8" v-for="(item, index) in cardList" :key="index">
            <div class="mcard1">
                <div class="t" :style="{backgroundColor: item.color}">{{item.name}}</div>
                <div class="c" :style="{color: item.color}">{{item.num}}</div>
            </div>
        </el-col>
    </el-row>
    <el-row class="top10">
        <el-col :span="12">
            <div class="pad10">
                <div class="borderRad pad10">
                    <Chart1 />
                </div>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="pad10">
                <div class="borderRad pad10">
                    <Chart2 />
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row class="top10">
        <el-col :span="12">
            <div class="pad10">
                <div class="borderRad pad10">
                    <Chart3 />
                </div>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="pad10">
                <div class="borderRad pad10">
                    <Chart4 />
                </div>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
import Chart1 from './chart/Chart1'
import Chart2 from './chart/Chart2'
import Chart3 from './chart/Chart3'
import Chart4 from './chart/Chart4'
export default {
    components: {
        Chart1,
        Chart2,
        Chart3,
        Chart4
    },
    data() {
        return {
            cardList: [{
                    name: '老年人口总数',
                    num: '192万',
                    color: '#6395FF'
                },
                {
                    name: '已评估老人人口数',
                    num: '190万',
                    color: '#FFAE38'
                },
                {
                    name: '已评估老人人口数',
                    num: '2万',
                    color: '#FF5D52'
                }
            ]
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {}
};
</script>

<style scoped>

</style>
